<template>
    <div style="text-align:center;">
        <Row style="margin-bottom:10px">
            <Col span="5">
                <label>服务状态：</label>
                <Select v-model="page.action_data.status" style="width:150px;"  @on-change="changeStatus">
                    <Option v-for="item in Lists" :value="item.index" :key="item.index">{{ item.title }}</Option>
                </Select>
            </Col>
             <Col span="16">
                <label>服务编号：</label>
                <Input v-model="page.action_data.number" style="width:200px"></Input>
                <label>服务名称：</label>
                <Input v-model="page.action_data.name" style="width:200px"></Input>
                <Button type="primary" icon="ios-search" @click="search" >搜索</Button>
                <Button type="primary"  @click="allInfo" >全部信息</Button>
               <Button  type="primary" @click="handleExportExcel">导出Excel</Button>
            </Col>
             <Col span="3">
                <Button type="primary" @click="modal.show=true">发布服务</Button>
            </Col>
        </Row>
        <Table border stripe :columns="columns1" :data="list" ref="table"></Table>
        <AutoPage v-model="page"></AutoPage>
        <Modal v-model="modal.show" title="创建服务" :loading="modal.loading">
            <Form ref="formValidate" :model="form.data" :rules="form.rules" :label-width="80">
                <FormItem label="标题" prop="title">
                    <Input v-model="form.data.title" placeholder="标准：地区+某（单位）+发布+某产品（金融产品名称）"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="ok()">创建</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import Page from '@/common/model/Page'
import AutoPage from '@/common/components/AutoPage'
import Service from '@/common/model/Service'

export default {
    data(){
        return {
            page: new Page("service/page",{status:6,name:''}),
            status:{
                type:'info',
                message:'草稿箱'
            },
            columns1:[
                {
                    title:'序号',
                    type:'index',
                    width: 100,
                    align:'center',
                },
                {
                    title: '编号',
                    key: 'number', 
                    render:(h, params) => {
                        return h('div', params.row.number);
                    }
                },
                {
                    title: '服务名称',
                    key: 'title'
                },
                {
                    title: '添加时间',
                    sortable: true,
                    width: 200,
                   render: (h, params) => { 
                        return h('strong', params.row.create_time); 
                }},
                {
                    title: '状态',
                    key: 'status',
                    width: 100,
                    align: 'center',
                    render: (h, params) => {
                        var status = this.formatStatus(params.row);
                        return h('Button', {
                                props: {
                                    type: status.type,
                                    size: 'small'
                                },
                                on:{
                                    click:()=>{
                                        this.page.action_data.status = params.row.status;
                                        this.page.current_page = 1;
                                        this.page.getData();
                                    }
                                }
                            }, status.message)
                    }
                },
                {
                        title: '操作',
                        key: 'action',
                        width: 300,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                 h('Button', {
                                    props: {
                                        type: 'info',
                                        size: 'small'
                                    },
                                    style:{
                                          marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleDetail(params.row)
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                           this.handleEdit(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                     style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleDelete(params.row)
                                        }
                                    }
                                }, '删除'),
                                 h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleRecycle(params.row)
                                        }
                                    }
                                }, '回收')
                            ]);
                        }
                }
            ],
            Lists:[
                 {
                    index:6,
                    title:'全部状态'
                },
                {
                    index:0,
                    title:'草稿箱'
                },
                {
                    index:1,
                    title:'审核中'
                },
                {
                     index:2,
                    title:'已发布'
                },
                {
                     index:3,
                    title:'审核未通过'
                },
                {
                     index:4,
                    title:'已回收'
                },
                
            ],
            modal: {
                show: false,
                loading: false
            },
            form: {
                rules: {
                    title: { required: true, message: '标题不能为空', trigger: 'blur' }
                },
                data: {
                    title: ""
                }
            }
        };
    },
    computed: {
        list() {
            return Service.parseList(this.page.list);
        }
    },
    components: {
        AutoPage
    },
    methods: {
            allInfo(){
                this.page.current_page = 1;
                this.page.action_data.status = 6;
                this.page.action_data.name = '';
                this.page.action_data.number = '';
                this.page.getData();        
            },
            search(){
                this.page.current_page = 1;
                this.page.getData();       
            },
            handleDetail(element){
                this.$router.push({
                    name:'post_service_project',query:{id:element.id,detail:1}
                })
            },
            handleEdit(element) {
                if(element.status == 1) {
                    this.$CustomMessage.error('已经提交审核不能修改！');  
                    return false;
                }else if(element.status == 2) 
                {
                    this.$CustomMessage.error('已发布不能进行修改!'); 
                    return false;
                }else if(element.status == 4){
                    this.$CustomMessage.error('已回收不能进行修改!');  
                    return false;
                }else{
                    this.$router.push({
                        name: 'post_service_project', 
                        query: { id: element.id, detail: 0 }
                    });
                }
            },
            handleDelete(element){
                if(!confirm("删除后信息不能被恢复，是否删除吗?")) return;
                else if(element.status == 1){
                     this.$CustomMessage.error('已经提交审核不能删除！');  
                     return false;
                }else if(element.status == 2){
                    this.$CustomMessage.error('已经发布不能删除！'); 
                    return false;
                }else if(element.status == 4){
                    this.$CustomMessage.error('已经回收过的不能删除！'); 
                    return false;
                }
                else if(element.id && element.status == 0) {
                    this.api.post( "service/delete", { id: element.id }, res => {
                            this.$CustomMessage.success('删除成功！');  
                            this.page.getData();  
                    });
                }else{
                    this.$CustomMessage.error( '删除失败！');  
                }
            },
            handleRecycle(element){
                 if(!confirm("回收后网站上的信息同样也会被回收，是否回收吗?")) return;
                 else if(element.status == 1){
                     this.$CustomMessage.error('已经提交审核不能回收！');  
                     return false;
                }else if(element.status == 4){
                      this.$CustomMessage.error('已经回收不能重复回收！'); 
                      return false;
                }else if(element.id) {
                    this.api.post( "service/recycle" , { id: element.id }, res => {
                        this.$CustomMessage.success('回收成功！');  
                        this.page.getData();  
                    });
                }
            },
            formatStatus(element){
                var status = {
                    type: '',
                    message: ''
                }
                if(element.status == 0){
                    status.type = "primary"
                    status.message = "草稿箱";
                }else if(element.status == 1){
                    status.type = "info"
                    status.message = "审核中";
                }else if(element.status == 2){
                    status.type = "success"
                    status.message = "已发布"
                }else if(element.status == 3){
                    status.type = "error"
                    status.message = "审核未通过"
                }else if(element.status == 4){
                    status.type = "warning"
                    status.message = "已回收"
                }
                return status;
            },
            changeStatus(){
                this.page.current_page = 1;
                this.page.getData();          
            },
            handleExportExcel(){
                this.page.exportExcel();
            },
            ok() {
                this.$refs["formValidate"].validate((valid) => {
                    if (valid) {
                        this.modal.loading = true;
                        this.api.post("service/create", { title: this.form.data.title }, res => {
                            this.$CustomMessage.success('创建成功');
                            this.modal.loading = false;
                            this.modal.show = false;
                            this.$router.push({
                                name: 'post_service_project', 
                                query: { id: res.id, detail: 0 }
                            });
                        });
                    }
                });
            },
            cancel() {
                this.modal.show = false;
            }
        },
        created(){
            this.modal.show = this.$route.query.show_create_modal == 1;
        }
    }
</script>